/* =======================================
   media-queries.css
   Responsive Typography, Components & Breakpoints
   ======================================= */

/* -------------------------------------------------------------------------
   1. Base Typography & Form Elements
   ------------------------------------------------------------------------- */
h1, .heading h2 {
  font-size: var(--heading-size);
  line-height: 1.2;
  margin-bottom: 1rem;
}
h2 {
  font-size: calc(var(--heading-size) * 0.85);
  line-height: 1.25;
  margin-bottom: 0.9rem;
 
}
h3 {
  font-size: calc(var(--heading-size) * 0.70);
  line-height: 1.3;
  margin-bottom: 0.8rem;
}
h4 {
  font-size: calc(var(--heading-size) * 0.60);
  line-height: 1.35;
  margin-bottom: 0.75rem;
}
h5 {
  font-size: calc(var(--heading-size) * 0.50);
  line-height: 1.4;
  margin-bottom: 0.6rem;
}
h6 {
  font-size: calc(var(--heading-size) * 0.40);
  line-height: 1.45;
  margin-bottom: 0.6rem;
}

p {
  font-size: var(--para-size);
  line-height: var(--line-height);
  margin-bottom: 1.2rem;
}

small,
.small {
  font-size: var(--para-small-size);
  line-height: var(--line-height);
}

.btn,
.btn-cta,
input,
textarea {
  font-size: var(--para-size);
  line-height: var(--line-height);
}

/* -------------------------------------------------------------------------
   2. Component Defaults (Cards, Grids, Images)
   ------------------------------------------------------------------------- */
.card,
.feature-item,
.blog .blog,
.business-carousel .item {
  max-width: 100%;
}

img,
.figure img,
.blog img,
.feature-illustration,
.business-img img,
.propel-img img,

.faq-carousel .item img {
  width: 100%;
  height: auto;
  display: block;
}

.feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.blog-section .row {
  gap: 1rem;
}

.projects .row.align-items-end {
  flex-wrap: wrap;
}

footer .social-icon a {
  transition: transform var(--transition);
}

footer .footer-logo,
footer .subscribe-text img {
  max-width: 100px;
  height: auto;
}

/* -------------------------------------------------------------------------
   3. Breakpoints & Overrides
   ------------------------------------------------------------------------- */

/* Large Desktops (≤1200px) */
@media (max-width: 1200px) {
  :root {
    --heading-size: 2.4rem;
    --para-size: 0.98rem;
    --para-small-size: 0.88rem;
  }
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.9rem; }
  p  { font-size: 0.98rem; }

  #heroCarousel {
    width: 85vw; /* Adjusting for larger screens */
  }

  .slide-content {
    max-width: 500px; /* Slightly decrease max-width */
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .blog-section .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .flip-card {
    max-width: 320px;
    height: 320px;
  }
}

/* Desktops & Laptops (≤992px) */
@media (max-width: 992px) {
  :root {
    --heading-size: 2.0rem;
    --para-size: 0.95rem;
    --para-small-size: 0.85rem;
  }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.4rem; }
  p  { font-size: 0.95rem; }
  #heroCarousel {
    width: 100%; /* Full width on smaller screens */
  }

  .slide-content {
    max-width: 90%; /* Adjust width for smaller screens */
  }

  .gradient-text {
    font-size: 2rem; /* Slightly smaller text on medium screens */
  }
  .text-illustration-box {
    gap: 3rem !important; /* reduce vertical gap slightly */
  }

  .icon-wrapper {
    width: 60px;
    height: 60px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  }

  .text-illustration-box p {
    font-size: 1.1rem; /* slightly smaller font */
  }
  .feature-grid,
  .blog-section .row {
    grid-template-columns: 1fr;
  }
  .projects .row.align-items-end {
    flex-direction: column;
  }

  footer .social-icon a {
    font-size: 1.4rem;
    margin: 0 0.5rem;
  }


  /* about media */

  .philosophy-section .gradient-text {
    font-size: 2rem;
  }

  .philosophy-section p {
    font-size: var(--para-small-size);
  }

  .philosophy-section img {
    margin-top: 1.5rem;
    max-height: 300px;
    object-fit: cover;
  }
  .flip-card {
    max-width: 300px;
    height: 300px;
  }
}

/* Tablets (≤768px) */
@media (max-width: 768px) {
  :root {
    --heading-size: 1.75rem;
    --para-size: 0.9rem;
    --para-small-size: 0.8rem;
  }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.2rem; }
  p  { font-size: 0.88rem;
  }

  .btn,
  .btn-cta {
    font-size: 0.9rem;
  }
  .slide-content {
    max-width: 90%; /* Ensure full width on smaller tablets */
    padding: 1rem; /* Adjust padding */
  }

  .padding-t-120 {
    padding-top: 0rem !important;
  }

  .gradient-text {
    margin-top: 2rem;
    font-size: 2rem; /* Smaller gradient text */
  }
  .fee-text {
    font-size: 0.8rem;
  }
  .fee-text .btn {
    font-size: 1rem;
    margin-left: 0;
    padding: 0.2rem 0;
  }
  .large-text {
    font-size: 1rem;
  
    margin-top: 2rem;
    margin-bottom: 7rem;
   
  }
  .text-illustration-box {
    gap: 2rem !important;
  }

  .icon-wrapper {
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  .text-illustration-box p {
    font-size: 1rem;
  }
  .cta-text {
    font-size: 1.1rem;
  
  }
  .cta-text small {
  
    margin: 0 ;
    
    font-size: 0.7rem;

  }

  .lets-talk.btn-cta {
    
    padding: 0.65em 1.7em;

    font-size: 0.89rem;

   
  }

  .btn-cta {
    padding: 0.75em 1.5em; /* Adjust button padding */
    font-size: 1rem;
  }
  .feature-item,
  .blog .blog,
  .business-carousel .item {
    padding: 1rem;
  }
  .feature-grid,
  .blog-section .row {
    gap: 1rem;
  }
  .faq-section .row,
  .together-section .row {
    flex-direction: column;
  }
  footer .social-icon a {
    font-size: 1.6rem;
  }
  footer .footer-logo,
  footer .subscribe-text img {
    max-width: 80px;
    margin: 0 auto;
  }
  /* about media */
  .philosophy-section .gradient-text {
    font-size: 1.8rem;
  }

  .philosophy-section p {
    font-size: 0.9rem;
  }

  .philosophy-section .btn-cta {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .philosophy-section img {
    max-height: 250px;
  }


  .timeline::before {
    left: 1rem;
  }

  .timeline-item {
    width: 100%;
    padding: 1rem 1rem 1rem 3.5rem;
  }

  .timeline-item.left,
  .timeline-item.right {
    left: 0;
    text-align: left;
  }

  .timeline-item .timeline-icon {
    left: 1rem;
    transform: none;
  }

  .flip-card {
    max-width: 280px;
    height: 280px;
  }
}

/* Mobile Phones (≤576px) */
@media (max-width: 576px) {
  :root {
    --heading-size: 1.5rem;
    --para-size: 0.85rem;
    --para-small-size: 0.75rem;
  }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1rem; }
  p  { font-size: 0.85rem; }
  .btn,
  .btn-cta {
    font-size: 0.85rem;
    padding: 0.75rem 1.5rem;
  }
  .business-carousel .item,
  .faq-carousel .item {
    max-width: 90%;
    margin: 0 auto;
  }
  .hero-section .slide-content {
    max-width: 300px;
    padding: 1rem;
  }
  .slide-content {
    max-width: 95%; /* Max width adjusted for small screens */
  }

  .gradient-text {
    font-size: 1.5rem; /* Smaller gradient text */
  }
.large-text{
      margin-bottom: 15rem;
}
  
.text-illustration-box {
  gap: 1.5rem !important;
}

.icon-wrapper {
  width: 36px;
  height: 36px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.text-illustration-box p {
  font-size: 0.95rem;
}
.btn-cta {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
  .propel .heading h6 {
    font-size: 0.5rem;
  
    margin-block: 0.3rem;
  }
  footer .row {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  footer .col-lg-6,
  footer .col-lg-3 {
    width: 100%;
    
  }
  footer .social-icon a {
    font-size: 1.8rem;
    margin: 0.5rem;
  }

  /* abou media */
  .philosophy-section .gradient-text {
    font-size: 1.5rem;
  }

  .philosophy-section p {
    font-size: 0.85rem;
  }

  .philosophy-section .btn-cta {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  .philosophy-section img {
    max-height: 200px;
  }
}
/* Large screens: alternate sides */
@media (min-width: 1201px) {
  .timeline-item {
    width: 50%;
  }
  .timeline-item:nth-child(odd) {
    left: 0; text-align: right;
  }
  .timeline-item:nth-child(even) {
    left: 50%; text-align: left;
  }
  .timeline-item:nth-child(odd) .timeline-icon {
    right: -1.25rem; left: auto;
  }
  .timeline-item:nth-child(even) .timeline-icon {
    left: -1.25rem; right: auto;
  }
}